<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://mybatis.org/schema/mybatis-mapper"
      xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns:v-id="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="assets/images/favicon.png" type="image/png">
    <title>首页</title>

    <!-- BEGIN PAGE LEVEL STYLES -->
    <link rel="stylesheet" type="text/css" href="assets/plugins/jquery-steps/css/jquery.steps.css"/>
    <!-- END PAGE LEVEL STYLES -->
    <link href="assets/css/icons.css" rel="stylesheet">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/responsive.css" rel="stylesheet">

</head>

<body class="sticky-header">
<div>
    <div>
        <!--Start left side Menu-->
        <div id="nav-left" class="left-side sticky-left-side">
        </div>
        <!--<script src="assets/js/commonPage/nav-left.js"></script>-->
        <!--End left side menu-->


        <!-- main content start-->
        <div class="main-content">

            <!-- header section start-->
            <!--        <script src="assets/js/commonPage/header.js"></script>-->
            <div class="header-section">

                <a class="toggle-btn"><i class="fa fa-bars"></i></a>

                <form class="searchform">
                    <input type="text" class="form-control" name="keyword" placeholder="Search here..."/>
                </form>

                <!--notification menu start -->
                <div class="menu-right">
                    <ul class="notification-menu">
                        <li>
                            <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <img :src="avatar" alt=""/>
                                头像
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-usermenu pull-right">
                                <li><a href="#"> <i class="fa fa-wrench"></i> uff </a></li>
                                <li><a href="#"> <i class="fa fa-user"></i> Profile </a></li>
                                <li><a href="#"> <i class="fa fa-info"></i> Help </a></li>
                                <li><a href="#"> <i class="fa fa-lock"></i> Logout </a></li>
                            </ul>
                        </li>

                    </ul>
                </div>
                <!--notification menu end -->

            </div>
            <!-- header section end-->


            <!--body wrapper start-->
            <div class="wrapper">

                <!--Start Page Title-->
                <div class="page-title-box">
                    <h4 class="page-title">首页</h4>
                    <ol class="breadcrumb">
                        <li>
                            <a href="#">卖家端</a>
                        </li>
                        <li class="active">
                            首页
                        </li>
                    </ol>
                    <div class="clearfix"></div>
                </div>
                <!--End Page Title-->
                <!-- Start timeline-->
                <div class="col-md-12" id="#vue_app">
                    <div class="white-box">
                        <h2 class="header-title">Latest Activity</h2>
                        <ul class="timeline timeline-compact">
                            <li class="latest">
                                <div class="timeline-date">Just Now</div>
                                <div class="timeline-title">Create New Page</div>
                                <div class="timeline-description">Lorem Ipsum generators on the tend to repeat.</div>
                            </li>

                            <li>
                                <div class="timeline-date">Just Now</div>
                                <div class="timeline-title">Back Up Theme</div>
                                <div class="timeline-description">Lorem Ipsum generators on the tend to repeat.</div>
                            </li>

                            <li>
                                <div class="timeline-date">Just Now</div>
                                <div class="timeline-title">Changes In The Structure</div>
                                <div class="timeline-description">Lorem Ipsum generators on the tend to repeat.</div>
                            </li>

                            <li>
                                <div class="timeline-date">Just Now</div>
                                <div class="timeline-title">New user register</div>
                                <div class="timeline-description">Lorem Ipsum generators on the tend to repeat.</div>
                            </li>

                            <li>
                                <div class="timeline-date">Just Now</div>
                                <div class="timeline-title">New user register</div>
                                <div class="timeline-description">Lorem Ipsum generators on the tend to repeat.</div>
                            </li>

                            <li>
                                <div class="timeline-date">Just Now</div>
                                <div class="timeline-title">New user register</div>
                                <div class="timeline-description">Lorem Ipsum generators on the tend to repeat.</div>
                            </li>

                            <li>
                                <div class="timeline-date">Just Now</div>
                                <div class="timeline-title">New user register</div>
                                <div class="timeline-description">Lorem Ipsum generators on the tend to repeat.</div>
                            </li>


                        </ul>
                    </div>
                </div>
                <!-- End timeline-->

            </div>
            <!-- End Wrapper-->


            <!--Start  Footer -->
            <footer id="footer" class="footer-main"></footer>
            <!--<script src="assets/js/commonPage/footer.js"></script>-->
            <!--End footer -->

        </div>
        <!--End main content -->

    </div>
    <!--Begin core plugin -->
    <script src="assets/js/jquery.min.js"></script>
    <!--======vue js ======-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/plugins/moment/moment.js"></script>
    <script src="assets/js/jquery.slimscroll.js "></script>
    <script src="assets/js/jquery.nicescroll.js"></script>
    <script src="assets/js/functions.js"></script>
    <!-- End core plugin -->

    <!-- BEGIN PAGE LEVEL SCRIPTS -->
    <script src="assets/pages/jquery.validate.min.js"></script>
    <script src="assets/plugins/jquery-steps/js/jquery.steps.min.js" type="text/javascript"></script>
    <!--====== http util js ======-->
    <script src="assets/js/util/http-util.js"></script>
</div>
</body>
<script>
    $(function () {
        $('#footer').load('footer.html');
        $('#nav-left').load('nav-left.html');
    })
</script>
</html>
<script>
    let vue_app = new Vue({
        el: '#in_vue',
        data: {
            newS:[],
        },
        methods: {
            getAvatar: function () {
                console.log("进入方法");
                let url = "/shop_admin/getAvatar";
                let thisObj = this;
                doGet(url, function (resp) {
                    thisObj.avatar = "assets/images/avatar/" + resp;
                    console.log(thisObj.avatar);
                })
            },
            getNews: function () {
                let url = "Url:https://way.jd.com/jisuapi/get?channel=头条&num=6&start=0&appkey=1cc2e5e5ab5c0f4baf21ac1d3ee857e7";
                let Obj = this;
                doGet(url, function (resp) {
                    Obj.newS = resp.categoryList;
                    console.log(resp);
                })
            },
        },
            mounted: function () {
                this.getAvatar();
                this.getNews();
            }
            ,
        })
</script>
